This page last changed on Nov 30, 2004 by jcarreira.

HTML Form Buttons and Webwork2

This Howto will describe the usage of HTML form buttons to invoke different behavior in actions.

Determine which button was pressed

The trick is that the type conversion of XW:XWork can be used to test which button was pressed in a simple way. When a button is pressed, a parameter is set in webwork with the name and value that are specified as the name and value attributes of your HTML button. XW:XWork converts this automatically to boolean value if an appropriate property of the Action is found.
These boolean Properties can be tested to determine which button was pressed:

<form action="MyAction.action">
<input type="submit" name="buttonOnePressed" value="First option"> 
<input type="submit" name="buttonTwoPressed" value="Alternative Option">
</form>

public class MyAction extends Action {

    /**
     * Action implementation
     *
     * Sets the message according to which button was pressed.
     **/
    public String execute() {
        if (buttonOnePressed) {
            message="You pressed the first button";
        } else if (buttonTwoPressed) {
            message="You pressed the second button";
        } else {
            return ERROR;
        }
        return SUCCES;
    }

    // Input parameters
    private boolean buttonOnePressed=false;
    private boolean buttonTwoPressed=false;

    public void setButtonOnePressed(boolean value) {
        this.buttonOnePressed = value;
    }


    public void setButtonTwoPressed(boolean value) {
        this.buttonTwoPressed = value;
    }

    // Output parameters

    private String message;
    public String getMessage() {
        return message;
    }
}

*Note_: Do not use String properties with buttons and test for the value that's set. This will break as soon as the _value attribute of the HTML button changes! This is likely because the value attribute used as the text shown to the user.

Dynamic set of buttons

Consider a web page showing a shopping cart or similiar tabular data. Often there is a button belonging to each row, in case of the shopping cart a delete button to remove the item from the cart. The number of buttons is dynamic and the id that couples the button to an item cannot go to the value attribute because all buttons should read "delete".

The solution is to __name* the buttons like delete[123], delete[594], delete[494] where 123, 594 and 494 are e.g. the items' ids:

<form action="UpdateCart.action">
  <ww:iterate value="items">
    <ww:property value="name"> 
    <input type="submit" name="delete[<ww:property value='id'>]" value="delete" /> <br/>
  </ww:iterate>
</form>

When e.g. the button for the item with the property id == "27" is pressed, a parameter named delete[27] and value "delete" is set in your action. The trick is to us declare your action's property "delete" as java.util.Map. Then, a key will exist for the button that was pressed:

public void class UpdateCart implements Action {
    // must be initialized to be usable as a webwork input parameter
    private Map delete = new HashMap(); 

    /** This is somewhat counter intuitive. But a property like "delete[OS:27]"
     *  that is set to "delete" by webwork will be interpreted by the underlying    
     *  OGNL expression engine as "set the property 27 of the action's property
     *  "delete" to the value "delete". So we must provide a getter for this
     */ action. A setter is not needed.
    public Map getDelete() {
        return delete;
    }

    public String execute() {
        for(Iterator i = delete.keySet().iterator(); i.hasNext(); ) {
            String id = (String) i.next();
            ...
            // do what ever you want
            ...
         }
         ...
    }
}

In this case it would not be necessary to iterate the whole keySet because it contains only one key but the same code can be use to handle sets of checkboxes if this is prefered later:

<form action="UpdateCart.action">
  <ww:iterate value="items">
    <ww:property value="name"> 
    <input type="checkbox" name="delete[<ww:property value='item'/>]" value="delete"> <br/>
  </ww:iterate>
  <input type="submit" name="updateCart" value="Update the cart"/>
</form>

The two implementations can even be combined two provide a quick "delete this item" button and a set of checkboxes for "mass updates". All with the above code, cool eh?

Document generated by Confluence on Dec 14, 2004 16:37